import React, { useState, useEffect } from "react";
import './index.scss';
function LyricsPlayer(){
    /// 歌词数据，包含时间戳和歌词文本
    const lyricssData=[
       { time: 0, text: '却如你的美怎么偷' },
        { time: 3000, text: '泼墨山水下笔温柔入卷轴' },
        { time: 6000, text: '飘散的思绪谁来收' },
        { time: 9000, text: '★ 我提笔不为离愁' },
        { time: 12000, text: '只为你转身回眸' },
        { time: 15000, text: '心事把自己弄丢' },
        { time: 18000, text: '淋湿在阁楼' },
        { time: 21000, text: '我提笔不为深秋' },
    ];
    //当前播放时间
    const [currentTime,setCurrentTime]=useState(0);
    //歌词容器的滚动位置
    const[scrollTop,setScrollTop]=useState(0);
  // 模拟音频播放进度更新，实际应用中应根据音频播放进度更新 currentTime
  useEffect(() => {
      const intervalId=setInterval(()=>{
        setCurrentTime(prevTime=>prevTime+1000);
      },1000);
      return ()=>clearInterval(intervalId);
  },[]);
  //根据当前播放时间计算歌词滚动位置
  useEffect(()=>{
    const index=lyricssData.findIndex(item=>item.time>currentTime);
    if(index>0){
        const prevItem=lyricssData[index-1];
        const diff=currentTime-prevItem.time;
        const lineHeight=30; // 每行歌词的高度
        const scrollOffset=(index-1)*lineHeight+(diff/(lyricssData[index].time-prevItem.time))*lineHeight;
        setScrollTop(scrollOffset);
    }
  },[currentTime,lyricssData]);
  return(
    <div className="lyrics-player">
     <div className="lyrics-container" style={{height:'300px',overflow:'auto',scrollTop}}>
        {
            lyricssData.map((item,index)=>(
                <p key={index} className={`lyrics-line ${currentTime>=item.item?'active':''}`}>
                    {item.text}
                </p>
            ))
        }

     </div>
     {/* 模拟进度条 */}
     <div className="progress-bar">
        <div className="progress" style={{width:`${(currentTime/21000)*100}%`}}></div>
     </div>
    </div>
  )
}
export default LyricsPlayer;